<script setup>
import {computed, onMounted, ref} from "vue";
import store from "@/store";
import {$ajax, apiUrl} from "@/utils/ajax";
import router from "@/router";
import {ElMessage, ElMessageBox} from "element-plus";

const account = computed(() => {
  return store.state.account
})
const gift = ref({})
onMounted(() => {
  store.dispatch("getUser")
  $ajax.get(`${apiUrl}merchant/gift/statics`).then(({data: {result}}) => {
    gift.value = result
  })
})
const logout = () => {
  ElMessageBox.confirm("确认退出登录？", "退出", {type: 'warning'}).then(() => {
    $ajax.post(`${apiUrl}merchant/user/logout`).then(() => {
      router.replace({name: 'login'})
    })
  })
}
</script>
<template>
  <div class="header">
    <el-icon size="55" color="#fff">
      <UserFilled/>
    </el-icon>
    <div>{{ account.name }}</div>
    <div class="barcode">
      {{ account.code }}
    </div>
  </div>
  <div class="chats">
    <el-text type="info" class="jingle">我的礼包</el-text>
    <div class="gift" v-for="gift in gift" :key="gift.id">
      <el-text type="primary">{{ gift.name }}</el-text>
      <div class="gift-data">
        <div class="gift-its" v-for="statics in gift.data" :key="statics.state">
          <div>
            <b>
              <el-text type="danger">{{ statics.number }}</el-text>
            </b>
          </div>
          <el-text type="info">{{ statics.name }}</el-text>
        </div>
      </div>
    </div>
  </div>
  <div class="toolbar">
    <div class="toolbar-its" @click="router.replace({name:'orderLst'})">
      <div class="toolbar-label">
        兑换记录
      </div>
      <el-icon>
        <ArrowRight/>
      </el-icon>
    </div>
    <div class="toolbar-its" @click="router.replace({name:'modify'})">
      <div class="toolbar-label">
        修改密码
      </div>
      <el-icon>
        <ArrowRight/>
      </el-icon>
    </div>
    <!--    <div class="toolbar-its" @click="router.replace({name:'qrcode'})">-->
    <!--      <div class="toolbar-label">-->
    <!--        推广码-->
    <!--      </div>-->
    <!--      <el-icon>-->
    <!--        <ArrowRight/>-->
    <!--      </el-icon>-->
    <!--    </div>-->
  </div>
  <div class="logout">
    <el-button type="danger" round size="large" @click="logout">退出账号</el-button>
  </div>

</template>

<style scoped lang="less">
.header {
  text-align: center;
  //渐变背景色
  background: linear-gradient(to bottom, rgba(44, 98, 246, 0.9) 45%, rgba(44, 98, 246, 0.45));
  box-sizing: border-box;
  padding: 25px;
  color: #ffffff;
  line-height: 1.7;

  .el-icon {
    border-radius: 50%;
    border: 1px solid #fff;
    padding: 8px;
    margin-bottom: 15px;
  }

  .barcode {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: .85rem;
  }
}

.chats {
  margin: 15px;
  box-sizing: border-box;
  padding: 15px 10px;
  position: relative;
  border: var(--el-border);
  border-radius: 5px;

  .jingle {
    position: absolute;
    top: -10px;
    background: #ffffff;
    padding: 0 10px;
  }

  .el-text--primary {
    font-size: 1rem;
  }

  .gift-data {
    margin: 10px auto;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .gift-its {
      flex-basis: 20%;
      width: 20%;
      text-align: center;
    }
  }
}

.toolbar {
  margin: 15px;
  box-sizing: border-box;

  .toolbar-its {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;

    & + .toolbar-its {
      border-top: var(--el-border);
    }
  }
}

.logout {
  //width: calc(100vw - 30px);
  margin: 15px;

  .el-button {
    width: 100%;
  }
}
</style>
